<template>
  <view class="competition-selection">
    <view class="search-bar">
      <input type="text" v-model="searchKeyword" placeholder="搜索赛事" @input="handleSearch" />
    </view>
    <view class="competition-list">
      <view class="competition-item" v-for="competition in displayedCompetitions" :key="competition.id" @click="selectCompetition(competition)">
        <image :src="competition.logo" mode="aspectFill" class="competition-logo"></image>
        <view class="competition-info">
          <text class="competition-name">{{ competition.name }}</text>
          <text class="competition-date">{{ competition.date }}</text>
          <text class="competition-description">{{ competition.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      competitions: [
        { id: 1, name: '足球世界杯', date: '2024-06-15 至 2024-07-15', logo: '/static/images/football_cup.png', description: '最高级别的国际足球赛事' },
        { id: 2, name: '篮球亚洲杯', date: '2024-07-20 至 2024-08-05', logo: '/static/images/basketball_asia.png', description: '亚洲范围内最高水平的篮球比赛' },
        { id: 3, name: '电子竞技邀请赛', date: '2024-12-01 至 2024-12-15', logo: '/static/images/esports_invite.png', description: '汇集全球电子竞技精英的邀请赛' }
      ],
      searchKeyword: '',
      displayedCompetitions: []
    };
  },
  created() {
    this.displayedCompetitions = this.competitions;
  },
  methods: {
    handleSearch() {
      this.displayedCompetitions = this.competitions.filter(competition => competition.name.includes(this.searchKeyword));
    },
    selectCompetition(competition) {
      this.$u.route({
        url: 'pages/CompetitionDetail',
        params: {
          id: competition.id
        }
      });
    }
  }
};
</script>

<style>
.competition-selection {
  padding: 20px;
}
.search-bar {
  margin-bottom: 20px;
}
.competition-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.competition-logo {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 15px;
}
.competition-info {
  flex: 1;
}
.competition-name {
  font-size: 18px;
  font-weight: bold;
}
.competition-date {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
}
.competition-description {
  font-size: 14px;
  color: #777;
  margin-top: 5px;
}
</style>